import React, { useState, cloneElement, useEffect } from 'react';
import { Badge, TabBar, Toast } from 'antd-mobile';
import './index.scss';
import {
  AppOutline,
  MessageOutline,
  SearchOutline,
  UnorderedListOutline,
  UserOutline,
} from 'antd-mobile-icons';
import '@/pages/rem.js';
import {
  HomeOutlined,
  search,
  BankFilled,
  UserOutlined,
  CustomerServiceOutlined,
} from '@ant-design/icons';
import styles from './index.less';
import '@nutui/nutui-react/dist/style.css';
import { TransitionGroup, CSSTransition } from 'react-transition-group';
import 'antd/dist/antd.css'; // or 'antd/dist/antd.less'
import request from 'umi-request';
import '@/static/iconfont.css';

export default function layouts({ location, children, history }) {
  const { pathname } = location;
  // 判断标签页是否隐藏
  const [hide, sethide] = useState(false);
  // console.log(`hide`, hide);
  const ANIMATION_MAP = {
    PUSH: 'forward',
    POP: 'back',
  };
  // useEffect(() => {
  //   checkrouter();
  // }, []);
  const checkrouter = () => {
    const { state = {} } = location;
    //beforepath 跳转前路由，只有在四个标签页跳转时有传递
    const { beforepath } = state;
    //curpath 当前路由
    const curpath = history.location.pathname;
    // 标签页路由集合
    const indexRouter = ['/home', '/store', '/my'];
    // 判断是不是标签页跳转
    const flag = history.action === 'REPLACE';
    // 判断标签页跳转前后顺序
    const before = indexRouter.findIndex((cur) => cur === beforepath);
    const after = indexRouter.findIndex((cur) => cur === curpath);
    const change = before < after ? 'PUSH' : 'POP';
    // 如果当前路由不是标签，说明跳去了二级页面，应该隐藏标签
    sethide(after == -1);
    // console.log(hide);
    // 设置转场动画效果
    return ANIMATION_MAP[flag ? change : history.action];
  };

  const [activeKey, setActiveKey] = useState('/home');
  const tabs = [
    {
      key: '/home',
      title: '首页',
      icon: <span className="icon-shouye1 iconfont"></span>,
      selectedIcon: <span className="icon-shouye1 iconfont"></span>,
    },
    {
      key: '/store',
      title: '本地商家',
      icon: (
        <span className="icon-icon_xinyong_xianxing_jijin-138 iconfont"></span>
      ),
      selectedIcon: (
        <span className="icon-icon_xinyong_xianxing_jijin-138 iconfont"></span>
      ),
    },
    {
      key: '/my',
      title: '我的',
      icon: <span className="icon-wode iconfont"></span>,
      selectedIcon: <span className="icon-wode iconfont"></span>,
    },
  ];

  return (
    <div className="app">
      <div className="body">
        <TransitionGroup
          childFactory={(child) =>
            cloneElement(child, { classNames: checkrouter() })
          }
        >
          <CSSTransition
            key={pathname}
            timeout={300}
            style={{
              position: 'fixed',
              height: '100%',
              width: '100%',
              top: '0',
              overflow: 'auto',
            }}
          >
            <div>{children}</div>
          </CSSTransition>
        </TransitionGroup>
      </div>
      <div
        className="paddingBottom"
        style={{
          // width: '100%',
          // position: 'fixed',
          // bottom: '0px',
          display: hide ? 'none' : 'block',
        }}
      >
        <TabBar
          activeKey={pathname}
          defaultActiveKey={activeKey}
          onChange={(beforepath) =>
            // 标签跳转，使用replace，同时传递跳转前路由
            history.replace(beforepath, {
              beforepath: history.location.pathname,
            })
          }
        >
          {tabs.map((item) => (
            <TabBar.Item
              key={item.key}
              icon={
                location.pathname === item.key ? item.selectedIcon : item.icon
              }
              title={item.title}
            />
          ))}
        </TabBar>
      </div>
    </div>
  );
}
